<template>
  <div class="maintenanceDetail-basic">
    <el-dialog title="新增工单" :visible="value" width="630px" @close="close">
      <div class="maintenanceDetail-img">
        <div class="maintenanceDetail-left">
          <img src="../../../assets/img/pic_1.png" alt="" style="width:26px;height:26px;">
          <span>待办</span>
        </div>
        <img src="../../../assets/img/pic_1.834b274c.png" alt="">
      </div>
      <div class="maintenanceDetail-main">
        <div class="mian-shuju">
          <div>设备编号：{{ detailObj.name && detailObj.name.innerCode }}</div>
          <div>运维人员：{{ detailObj.name && detailObj.name.userName }}</div>
          <div>补货数量： <el-button type="text" icon="el-icon-document" @click="replenish">补货清单</el-button></div>
          <div>工单方式：{{ detailObj.name && detailObj.name.desc }}</div>
        </div>
        <div class="mian-shuju">
          <div>创建日期：{{ detailObj.name && detailObj.name.createTime }}</div>
          <div>工单类型：{{ detailObj.name && detailObj.name.desc }}</div>
          <div>备注：{{ detailObj.name && detailObj.name.addr }}</div>
          <!-- <div></div> -->
        </div>
      </div>
      <div class="maintenanceDetail-bot">
        <el-button size="medium" class="custom-button2" type="primary" @click="operaCancelCl">取消工单</el-button>
      </div>    </el-dialog>
    <!-- 补货清单 -->
    <el-dialog title="补货详情" :visible.sync="replenishDetail" width="630px" class="replenish-dialog" @close="closez">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="channelCode"
          label="货道编号"
          width="100"
        />
        <el-table-column
          prop="skuName"
          label="商品名称"
        />
        <el-table-column
          prop="expectCapacity"
          label="当前数量"
        />
        <el-table-column
          prop="address"
          label="还可添加"
        />
        <el-table-column
          prop="address"
          label="补满数量"
          width="180"
        />
      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button style="background-color: #fbf4f0;border: 0px;" @click="closez">取 消</el-button>
        <el-button type="primary" style="background-color: #ff6b28;border: 0px;">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { goodsDetailApi, operaCancelApi, goodsTaskDetailsApi } from '../../../api/operate'
export default {
  name: 'MaintenanceDetail',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    detailObj: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '100px',
      tableData: [],
      replenishDetail: false,
      opRowObj: {}
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
    close() {
      // 通知父组件关闭弹窗
      this.$emit('input', false)
      // 只对有校验的表单才会清空
      // this.$refs.fromRef.resetFields()
      // 将数据初始化,表单就会清空
      // this.form = this.$options.data().form
      // 需要清空一下这个id,不然在进行添加这个id会一直存在就一直编辑
      // this.$emit('update:edit-id', null)
    },
    closez() {
      this.replenishDetail = false
    },
    replenish() {
      this.replenishDetail = true
      // console.log(this.$store.state.user.operateRow)
      this.opRowObj = this.$store.state.user.operateRow
      this.goodsTaskDetails()
    },
    async goodsDetailList() {
      const res = await goodsDetailApi()
      console.log(res, 66666)
    },
    // 取消工单
    async  operaCancelCl() {
      try {
        const res = await operaCancelApi({ desc: this.detailObj.name.desc, taskId: this.detailObj.name.taskId })
        console.log(res)
        this.closez()
        this.$message('已取消')
      } catch (error) {
        //
      }
    },
    async   goodsTaskDetails() {
      const res = await goodsTaskDetailsApi(this.opRowObj.taskId)
      console.log(res, 333333)
      this.tableData = res.data
    }

  }
}
</script>
<style lang='scss'  >
.maintenanceDetail-basic .replenish-dialog .el-dialog{
  height: 800px !important;
}
 .maintenanceDetail-basic{
  .el-dialog{
    border-radius: 10px;
    padding: 20px 20px 30px;
    position: relative;
  .el-input__inner{
      width: 396px;
    }
    .el-textarea{
      width: 88%;
    }
  }
  .maintenanceDetail-img{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f8f8;
    margin-bottom: 10px;
    .maintenanceDetail-left{
      display: flex;
      justify-content: space-between;
    align-items: center;
    span{
      margin-left:25px ;
    }
    }
  }
   .maintenanceDetail-main{
      display: flex;
      justify-content: space-between;
      .mian-shuju{
        div{
          margin: 30px;
        }
      }
    }
    .maintenanceDetail-bot{
      margin-bottom: 40px;;
  .custom-button2{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 20px;
    color: #655b56;
    width: 80px;
    height: 36px;
    padding: 5px;
    border: 0px solid #fff;
    background-color: #fbf4f0;
    }
    .custom-button2:hover{
    background-color: #f3e7e1;
    }
    }
  .replenish-dialog{
      .el-dialog{
    height: 550px;
    .el-table td, .el-table th.is-leaf{
    border-bottom: 0px solid #EBEEF5;
    }

      }
  }
}
</style>
